<template>
    <div class="index">
        <div class="index-div">
            <label>
                <span class="index-span">手机号:</span>
                <input class="index-input" type="number" v-model="phone" @keyup.enter="phoneFindFrom()">
            </label>
            <button class="index-button" @click="phoneFindFrom()">查询</button>
        </div>
        <div>
            <span class="index-title" :class="titleClass">{{title}}</span>
            <table class="index-table" v-show="isShow">
                <tbody class="index-tbody">
                    <tr>
                        <td>手机号码段:</td>
                        <td>{{ phone }}</td>
                    </tr>
                    <tr>
                        <td>卡号归属地:</td>
                        <td>{{ result.province + ' ' + result.city }}</td>
                    </tr>
                    <tr>
                        <td>运营商:</td>
                        <td>{{ result.company }}</td>
                    </tr>
                    <tr>
                        <td>区号:</td>
                        <td>{{ result.areacode }}</td>
                    </tr>
                    <tr>
                        <td>邮编:</td>
                        <td>{{ result.zip }}</td>
                    </tr>
                </tbody>
            </table>

            <span class="index-footer">聚合数据提供数据支持</span>
        </div>
    </div>
</template>

<script>
import Axios from 'axios';

export default {
    name: "Index",
    data() {
        return {
            phone: '',
            title: '回车或点击查询按钮查询手机归属地',
            result: {
                "province": "",
                "city": "",
                "areacode": "",
                "zip": "",
                "company": "",
                "card": ""
            },
            isShow : false,
            titleClass : '',
        }
    },
    methods: {
        phoneFindFrom() {
            this.isShow = false;
            if (this.phone.length !== 11) {
                this.title = "手机号格式错误";
                this.titleClass = 'error';
                return false;
            }

            console.log(this.phone);
            Axios.get('/mobile/get', {
                params: {
                    phone: this.phone,
                    key: 'e9cf208b73f9be4bb78bdbf70660f93a'
                }
            }).then(res => {
                if (res.data.resultcode === '200') {
                    this.result = res.data.result;
                    this.title = "查询成功";
                    this.isShow = true;
                    this.titleClass = 'success';
                } else {
                    console.log('请求异常', res.data.reason);

                }
            })
        }
    }
}
</script>

<style scoped>
.index {
    margin: 0;
    padding: 0;
}

.index-div {
    height: 40px;
    background-color: #b8daff;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.index-span {
    position: fixed;
    left: 5%;
    color: #1c7430;
}

.index-input {
    border: 1px solid #b9bbbe;
    height: 20px;
}

.index-button {
    cursor: pointer;
    position: fixed;
    right: 5%;
    background-color: #d6d8db;
    border: 0;
    width: 100px;
    height: 25px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.index-table{
    border: 1px solid #b9bbbe;
    width: 100%;
    text-align: center;
}
.index-tbody tr td{
    width: 100px;
    border: 1px solid #b9bbbe;
}
.index-title{
    text-align: center;
    width: 100%;
    display: block;
    margin: 2%;
}
.index-footer{
    text-align: center;
    width: 100%;
    display: block;
    margin: 2%;
    font-size: 15px;
}
.success{
    color: green;
}
.error{
    color: red;
}
</style>